﻿<phone:PhoneApplicationPage 
    x:Class="TipCalc.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:TipCalc"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
    shell:SystemTray.IsVisible="False" OrientationChanged="PhoneApplicationPage_OrientationChanged">
    <phone:PhoneApplicationPage.Resources>

        <Storyboard  x:Name="mainInAnimation">
            <DoubleAnimation Storyboard.TargetName="ContentPanel" 
                                    Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                                    Duration="0:0:1" To="-20" >
                <DoubleAnimation.EasingFunction>
                    <ExponentialEase  EasingMode="EaseOut"  />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="TitlePanel" 
                                    Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                                    Duration="0:0:1" To="-20" >
                <DoubleAnimation.EasingFunction>
                    <ExponentialEase  EasingMode="EaseOut"  />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="ContentPanel" Storyboard.TargetProperty="Opacity" Duration="0:0:1.5" To="1">
                <DoubleAnimation.EasingFunction>
                    <QuadraticEase EasingMode="EaseOut"  />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>

        <Storyboard  x:Name="translateAmountAnimation" >
            <DoubleAnimation Storyboard.TargetName="translateAmount" 
                                 Storyboard.TargetProperty="Y"
                     To="-3" AutoReverse="True" Duration="0:0:0.2">
                <DoubleAnimation.EasingFunction>
                    <ExponentialEase  EasingMode="EaseOut"  />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>

        <Storyboard  x:Name="percentAmountAnimation" >
            <DoubleAnimation Storyboard.TargetName="percentAmount" 
                                 Storyboard.TargetProperty="Y"
                     To="-3" AutoReverse="True" Duration="0:0:0.2">
                <DoubleAnimation.EasingFunction>
                    <ExponentialEase  EasingMode="EaseOut"  />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>

        <Storyboard  x:Name="peopleAmountAnimation" >
            <DoubleAnimation Storyboard.TargetName="peopleAmount" 
                                 Storyboard.TargetProperty="Y"
                     To="-3" AutoReverse="True" Duration="0:0:0.2">
                <DoubleAnimation.EasingFunction>
                    <ExponentialEase  EasingMode="EaseOut"  />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>

    </phone:PhoneApplicationPage.Resources>
    <!--<Canvas Name="transCanvas" > -->

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" >
        <Grid.Background>
            <ImageBrush x:Name="backgroundBrush" Stretch="None" Opacity="0.3" ImageSource="Images/background2.jpg"></ImageBrush>
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>


        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="40,10,0,10">
            <StackPanel.RenderTransform>
                <CompositeTransform></CompositeTransform>
            </StackPanel.RenderTransform>
            <TextBlock x:Name="ApplicationTitle" Text="MONEY MANAGEMENT" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Tip Calc" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>
        <!--ContentPanel - place additional content here-->
        <Grid Grid.Row="1" x:Name="ContentPanel" Opacity="0.0">
            <Grid.RowDefinitions>
                <RowDefinition Height="346" />
                <RowDefinition Height="318*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RenderTransform>
                <CompositeTransform></CompositeTransform>
            </Grid.RenderTransform>


            <StackPanel>
                <StackPanel Orientation="Horizontal">
                    <StackPanel VerticalAlignment="Top" HorizontalAlignment="Center" Margin="35,5,5,5">
                        <TextBlock Name="amountLabelTextBlock" Margin="0,15,0,0" Text="Bill amount:" Style="{StaticResource PhoneTextLargeStyle}" />
                        <TextBlock Name="percentLabelTextBlock" Margin="0,35,0,0" Text="Percentage to Tip:" Style="{StaticResource PhoneTextLargeStyle}" />
                        <TextBlock Name="peopleLabelTextBlock" Margin="0,40,0,0" Text="Number of People:"  Style="{StaticResource PhoneTextLargeStyle}" />
                    </StackPanel>

                    <StackPanel>
                        <TextBox Text="" Name="amountTextBox"  LostFocus="amountTextBox_LostFocus" GotFocus="amountTextBox_GotFocus"
                     Width="150" FontSize="{StaticResource PhoneFontSizeLarge}" TextAlignment="Right" Opacity="0.7">
                            <TextBox.RenderTransform>
                                <TranslateTransform  x:Name="translateAmount" ></TranslateTransform>
                            </TextBox.RenderTransform>
                            <TextBox.InputScope>
                                <InputScope>
                                    <InputScopeName NameValue="TelephoneNumber" />
                                </InputScope>
                            </TextBox.InputScope>
                        </TextBox>

                        <TextBox Text="10" Name="percentTextBox"  LostFocus="percentTextBox_LostFocus" GotFocus="percentTextBox_GotFocus"
                      Width="150" FontSize="{StaticResource PhoneFontSizeLarge}" TextAlignment="Right" Opacity="0.7">
                            <TextBox.RenderTransform>
                                <TranslateTransform  x:Name="percentAmount" ></TranslateTransform>
                            </TextBox.RenderTransform>
                            <TextBox.InputScope>
                                <InputScope>
                                    <InputScopeName NameValue="TelephoneNumber" />
                                </InputScope>
                            </TextBox.InputScope>
                        </TextBox>

                        <TextBox Text="1" Name="peopleTextBox" LostFocus="peopleTextBox_LostFocus" GotFocus="peopleTextBox_GotFocus"
                      Width="150" FontSize="{StaticResource PhoneFontSizeLarge}" TextAlignment="Right" Opacity="0.7">
                            <TextBox.RenderTransform>
                                <TranslateTransform  x:Name="peopleAmount" ></TranslateTransform>
                            </TextBox.RenderTransform>
                            <TextBox.InputScope>
                                <InputScope>
                                    <InputScopeName NameValue="TelephoneNumber" />
                                </InputScope>
                            </TextBox.InputScope>
                        </TextBox>
                    </StackPanel>
                </StackPanel>
                <StackPanel>
                    <TextBlock Height="34" Margin="30,0,0,0" HorizontalAlignment="Center" Name="rateTextBlock" 
                               Text="Horrible     Poor         OK          Great     The best! " />
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="25,0,0,0" Grid.RowSpan="2">
                        <RadioButton Height="70" Name="radioButton1" Margin="3" HorizontalContentAlignment="Left" Width="80" Checked="radioButton1_Checked" />
                        <RadioButton Height="70" Name="radioButton2" Margin="3"  HorizontalContentAlignment="Left" Width="80" Checked="radioButton2_Checked" />
                        <RadioButton Height="70" Name="radioButton3" Margin="3"  HorizontalContentAlignment="Left" Width="80" Checked="radioButton3_Checked" />
                        <RadioButton Height="70" Name="radioButton4" Margin="3"  HorizontalContentAlignment="Left" Width="80" Checked="radioButton4_Checked"/>
                        <RadioButton Height="70" Name="radioButton5" Margin="3"  HorizontalContentAlignment="Left" Width="80" Checked="radioButton5_Checked"/>
                    </StackPanel>
                </StackPanel>
            </StackPanel>
            
            <Grid Name="bottomGrid" Grid.Row="1" Grid.ColumnSpan="2">
                <StackPanel Name="sumStackPanel"  Orientation="Horizontal" HorizontalAlignment="Left" Margin="35,30,0,0" VerticalAlignment="Top">
                    <StackPanel >
                        <TextBlock HorizontalAlignment="Left" Margin="1" Text="Tip Amount:" VerticalAlignment="Top" Style="{StaticResource PhoneTextLargeStyle}" />
                        <TextBlock HorizontalAlignment="Left" Margin="1" Text="Total to Pay:" VerticalAlignment="Top" Style="{StaticResource PhoneTextLargeStyle}" />
                        <TextBlock HorizontalAlignment="Left" Margin="1" Text="Total / Person:" VerticalAlignment="Top" Style="{StaticResource PhoneTextLargeStyle}" />
                    </StackPanel>
                    <StackPanel>
                        <TextBlock  HorizontalAlignment="Left" TextAlignment="Right" Name="tipAmountTextBlock" Text="0" Margin="5,1,1,1" VerticalAlignment="Top" Style="{StaticResource PhoneTextLargeStyle}" />
                        <TextBlock  HorizontalAlignment="Left" TextAlignment="Right" Name="totalPayAmountTextBlock" Text="0" Margin="5,1,1,1" VerticalAlignment="Bottom" Style="{StaticResource PhoneTextLargeStyle}" />
                        <TextBlock  HorizontalAlignment="Left" TextAlignment="Right" Name="totalPerPersonTextBlock" Text="0" Margin="5,1,1,1"  VerticalAlignment="Top" Style="{StaticResource PhoneTextLargeStyle}" />
                    </StackPanel>
                </StackPanel>

                <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,0,0">
                    <Button  Content="Clear" Height="80" Name="clearButton" Width="150" Click="clearButton_Click" />
                    <Button  Content="About" Height="80" Name="aboutButton" Width="150" Click="aboutButton_Click"  />
                </StackPanel>
            </Grid>
        </Grid>
    </Grid>
    <!--</Canvas>-->
</phone:PhoneApplicationPage>